{% extends "GairalAdminBundle::layout.html.twig" %}

{% block bodyAdmin %}
<section id="CategoryAdmin" class="content">
    <div class="row-fluid">
        <table class="table table-striped table-condensed">
            <caption>
                <h4>Categories</h4>
            </caption>
            <thead>
                <tr>
                    <th>Category Name</th>
                    <th>skills/interests</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="3">
                        <div class="modal hide" id="addCategory">
                            <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
                                <h3>Add new Category</h3>
                            </div>
                            {{ render(controller("GairalAdminBundle:CategoryAdmin:add")) }}
                        </div>
                        <div class="btn-toolbar text-center">
                            <a href="#addCategory" data-toggle="modal" class="btn btn-large btn-primary">
                                Add new Category
                                <i class="icon-white icon-plus"></i>
                            </a>
                        </div>
                        </td>
                    </tr>
                {% for category in listCategories %}
                    <tr>
                        <td>{{ category.name }}</td>
                        <td>
                    {% if category.skills|length > 0 %}
                                <div class="btn-group">
                                    <a class="btn  btn-info dropdown-toggle" data-toggle="dropdown" href="#">
                                        Skills
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu">
                    {% for skill in category.skills %}
                                            <li><a tabindex="-1" href="#">{{ skill.name }}</a></li>
                    {% endfor %}
                                            </ul>
                                        </div>
                    {% endif %}
                    {% if category.interests|length > 0 %}
                                        <div class="btn-group">
                                            <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
                                                Interests
                                                <span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">
                    {% for interest in category.interests %}
                                                    <li><a tabindex="-1" href="#">{{ interest.name }}</a></li>
                    {% endfor %}
                                                    </ul>
                                                </div>
                    {% endif %}
                                            </td>   
                                            <td>
                                                <div class="btn-toolbar">
                                                    <div class="btn-group">
                                                        <a href="{{ path('AdminCategoryModify', {'id': category.id})}}" data-toggle="modal" class="btn btn-small btn-inverse">
                                                            Edit
                                                            <i class="icon-white icon-edit"></i>
                                                        </a>
                                                        {% if category.displayOrder != maxOrder %}
                                                        <a href="{{ path('AdminCategoryUp', {'id': category.id})}}" class="btn btn-small">
                                                            <i class="icon-arrow-down"></i>
                                                        </a>
                                                        {% endif %}
                                                        {% if category.displayOrder > 0 %}
                                                        <a href="{{ path('AdminCategoryDown', {'id': category.id})}}" class="btn btn-small">
                                                            <i class="icon-arrow-up"></i>
                                                        </a>
                                                        {% endif %}
                                                    </div>
                                                    <a href="#remove_{{category.id}}" data-toggle="modal" class="btn btn-small btn-danger">
                                                        Remove
                                                        <i class="icon-white icon-trash"></i>
                                                    </a>
                                                </div>
                                                <div class="modal hide" id="remove_{{category.id}}">
                                                    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
                                                        <h3>Remove Category</h3>
                                                    </div>
                                                    <div class="modal-body alert">
                                                        <p>
                                                            Are you sure to want to remove the Category: "{{ category.name }}" ?
                                                        </p>
                                                        <div class="alert-error">
                                                                All skills and Interest linked to it will be removed as well
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="{{ path('AdminCategory') }}" class="btn btn-info" data-dismiss="modal">
                                                            Cancel
                                                        </a>
                                                        <a href="{{ path('AdminCategoryRemove', {'id': category.id})}}" class="btn btn-danger">
                                                            Remove
                                                            <i class="icon-white icon-trash"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
    {% else %}
                                        no category
    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </section>
{% endblock %}